<template>
  <view class="goods-module-two-container">
    <view class="goods-module-two-left">
      <view class="left-img" @click="goToUrl(goodsModuleTwoData.leftGoods.link)">
        <image class="img" :src="goodsModuleTwoData.leftGoods.img"></image>
      </view>

    </view>
    <view class="goods-module-two-right">
      <view class="small-goods-item" v-for="(item, index) in goodsModuleTwoData.rightGoodsList" :key="index">
          <view class="goods-info">
            <view class="goods-info-content">
              <view class="goods-title" :style="{'color': item.titleColor}">
                {{item.title}}
              </view>
              <view class="goods-subtitle" :style="{'color': item.subtitleColor}">
                {{item.subtitle}}
              </view>
              <view class="goods-buy-link" @click="goToUrl(item.buyLink)">
                立即抢购>
              </view>
            </view>
          </view>
          <view class="goods-img" @click="goToUrl(item.goodsLink)">
            <image class="img" src="@/static/shop/demo/banner2.png"></image>
          </view>

      </view>

    </view>

  </view>
</template>
<script setup lang="ts">
import {ref, onUpdated} from 'vue'
const props = defineProps({
  // goodsModuleTwoData: Object
});
const goodsModuleTwoData = {
  leftGoods:{
    img:'/static/shop/demo/banner2.png',
    link:'https://www.baidu.com/leftGoods',
  },
  rightGoodsList:[
    {
      title:'商品榜单',
      subtitle:'精选排行榜',
      titleColor:'black',
      subtitleColor:'#3377FF',
      goodsImg:'/static/shop/demo/banner2.png',
      buyLink:'https://www.baidu.com/111',
      goodsLink:'https://www.baidu.com/goods1',
    },
    {
      title:'主推商品',
      subtitle:'松下精选',
      titleColor:'black',
      subtitleColor:'#F81A1A',
      goodsImg:'/static/shop/demo/banner2.png',
      buyLink:'https://www.baidu.com/222',
      goodsLink:'https://www.baidu.com/goods2',
    }
  ]
}
const goToUrl = (url)=>{
  console.info('goToUrl:' + url)
}
</script>
<style lang="scss" scoped>

.goods-module-two-container{
  width: 686rpx;
  height: 386rpx;
  margin-left: 32rpx;
  display: flex;
}

.goods-module-two-left{
  width: 306rpx;
  height: 386rpx;
  //background-color: white;
  .left-img{
    width: inherit;
    height: inherit;
    .img{
      width: inherit;
      height: inherit;
    }
  }
}
.goods-module-two-right{
  margin-left: 18rpx;
  width: 362rpx;
  height: 386rpx;
  display: flex;
  flex-direction: column;
  gap: 18rpx;
  .small-goods-item{
    width: 362rpx;
    height: 184rpx;
    background: #FFFFFF;

    display: flex;
    border-radius: 18rpx;
    .goods-info{
      width: 176rpx;
      height: 184rpx;
      .goods-info-content{
        width: 144rpx;
        margin-left: 32rpx;
        margin-top: 32rpx;
        .goods-title{
          font-family: PingFangSC-Semibold;
          font-size: 32rpx;
          color: #222222;
          line-height: 44rpx;
          font-weight: 600;
        }
        .goods-subtitle{
          font-family: PingFangSC-Semibold;
          font-size: 20rpx;
          color: #3377FF;
          font-weight: 600;
        }
        .goods-buy-link{
          margin-top: 18rpx;
          font-family: PingFangSC-Regular;
          font-size: 20rpx;
          color: #999999;
          line-height: 28rpx;
          font-weight: 400;
        }
      }
    }
    .goods-img{
      width: 184rpx;
      height: 184rpx;
      //background-color: #007aff;
      display: flex;
      .img{
        width: 120rpx;
        height: 120rpx;
        margin:auto;
      }
    }

  }
}
</style>